<template>
  <ele-page>
    <!-- 搜索表单 -->
    <search @search="reload" />
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="userId"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        highlight-current-row
        cache-key="systemUserTable"
      >
        <template #status="{ row }">
          <el-switch
            size="small"
            :model-value="row.status === 1"
            @change="(checked) => editStatus(checked, row)"
          />
        </template>
        <template #tools>
          <el-button type="success" class="ele-btn-icon" @click="updateSort()">
            更新排序
          </el-button>
        </template>
        <template #sort="{ row }">
          <el-input v-model="row.sort" />
        </template>
      </ele-pro-table>
    </ele-card>
  </ele-page>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import search from './components/search.vue';

  import { getCityList, updateSiteStatus, updateSiteSort } from '@/api/region';

  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = computed(() => {
    const cols = [];

    if (status.value === 1) {
      cols.push({
        slot: 'sort',
        label: '排序',
        width: 110
      });
    }

    cols.push(
      {
        prop: 'id',
        label: 'ID',
        width: 90,
        minWidth: 110
      },
      {
        prop: 'status',
        label: '开通状态',
        width: 100,
        align: 'center',
        slot: 'status'
      },
      {
        prop: 'region_name',
        label: '站点名',
        minWidth: 110,
        slot: 'region_name'
      }
    );

    return cols;
  });

  /** 更新排序 */
  const updateSort = () => {
    var list = tableRef.value.getData();
    var requestData = [];
    for (var i = 0; i < list.length; i++) {
      const v = {
        id: list[i].id,
        sort: list[i].sort
      };
      requestData.push(v);
    }
    console.log(requestData);
    updateSiteSort({ datas: JSON.stringify(requestData) })
      .then(() => {
        EleMessage.success('更新成功!');
        reload();
      })
      .catch(() => {});
  };

  /** 表格数据源 */
  const datasource = ({ page, limit, where, orders }) => {
    return getCityList({
      ...where,
      ...orders,
      page,
      limit
    });
  };
  const status = ref(1);
  /** 搜索 */
  const reload = (where) => {
    status.value = where ? where.status : 1;
    tableRef.value?.reload?.({ page: 1, where });
  };

  /** 修改用户状态 */
  const editStatus = (checked, row) => {
    const status = checked ? 1 : 0;
    const site_id = row.site_id ? row.site_id : 0;
    updateSiteStatus({
      id: row.id,
      status,
      site_id,
      region_name: row.region_name
    })
      .then(() => {
        row.status = status;
        EleMessage.success('操作成功');
      })
      .catch((e) => {
        EleMessage.error(e.message);
      });
  };
</script>

<script>
  export default {
    name: 'SystemSite'
  };
</script>
